<template>
   <div>
      <van-overlay :show="overlayVisable" z-index="2">
         <div class="wrapper">
            <van-loading size="24px">
               <span id="loading">数据加载中...</span>
            </van-loading>
         </div>
      </van-overlay>
      <!-- <img style="position: absolute; margin-left: 150px;margin-top: 25px;" src="../assets/kedaxiaohui.jpg" width="25%" height="15%"> -->
      <div id="background">
         <div id="box">
            <img style="margin-left: 35%;margin-top: 50px;" src="../assets/kedaxiaohui.jpg" width="30%" height="20%">
            <div style="margin-left: 30%;">
               <span style="font-size: 18px;">广科大校园在线点餐</span>
            </div>
            <div style="height: 40px;"></div>
            <van-form @submit="onSubmit" style="margin-left: -15px;">
               <van-cell-group inset style="width: 94%; ">
                  <van-field v-model="username" name="用户名" label="" placeholder="请输入用户名" />
                  <van-field v-model="password" type="password" name="密码" label="" placeholder="请输入密码" />
                  <van-field v-if="confirmPasswordVisible" v-model="confirmPassword" type="password" name="密码" label=""
                     placeholder="请再次输入密码" />
               </van-cell-group>
               <div style="margin-left: 20px;margin-top: 16px; width: 90%; ">

                  <div v-if="confirmPasswordVisible == false">
                     <van-button id="disbledButton" v-if="username.length==0||password.length==0" disabled round block
                        native-type="submit">
                        <span>登录</span>
                     </van-button>
                     <van-button v-else round block type="info" native-type="submit">
                        <span>登录</span>
                     </van-button>
                  </div>


                  <div v-if="confirmPasswordVisible == true">
                     <van-button id="disbledButton"
                        v-if="username.length==0||password.length==0||confirmPassword.length==0" disabled round block
                        native-type="submit">
                        <span>注册</span>
                     </van-button>
                     <van-button v-else round block type="info" native-type="submit">
                        <span>注册</span>
                     </van-button>
                  </div>

               </div>
               <div style="height: 10px;"></div>
               <span style="color:skyblue; margin-left: 25px;"
                  @click="confirmPasswordVisible = !confirmPasswordVisible">
                  <span v-if="confirmPasswordVisible == false">没有账号？</span>
                  <span v-if="confirmPasswordVisible == true">已有账号</span>
               </span>
            </van-form>

         </div>

      </div>
      <footer style="position: absolute;margin-top: 550px;margin-left: 20px;">
         <van-checkbox v-model="checked" icon-size="16px">
            <span style="color: grey;  font-size: 14px;"> 已经阅读并同意</span> <span
               style="color:skyblue;font-size: 14px;">《用户服务协议》、《隐私政策》</span>
         </van-checkbox>
      </footer>
   </div>
</template>
<script>
   import request from '@/utils/request';
   import {
      Toast
   } from 'vant';
   export default {
      name: 'Login',
      data() {
         return {
            username: '北冥雪',
            password: '123456',
            confirmPassword: '',
            checked: false,
            confirmPasswordVisible: false,
            overlayVisable:false,
            url: {
               login: '/schoolOrder/app/login',
               register: '/schoolOrder/app/register'
            }
         }
      },

      methods: {


         /**
          *  表单提交
          */
         onSubmit() {
            if (this.confirmPasswordVisible == false) {
               
               this.login();
               
            } else {
               this.register();
            }
         },

         /**
          * 登录
          */
         login() {
            this.overlayVisable = true;
            if (this.checked == false) {
               Toast('请阅读《用户服务协议》、《隐私政策》！');
               this.overlayVisable = false;
               return;
            }

            request.post(this.url.login, {
               username: this.username,
               password: this.password
            }).then(
               res => {        
           //       console.log(res)       
                  if (res.data.code == 200) {
                     this.$store.commit('setToken', res.data.data)
                     // this.$router.push('/courseSelection')
                     this.overlayVisable = false;
                     this.$router.push("/manager/home");
                  } else {
                     Toast(res.data.msg);
                     this.overlayVisable = false;
                  }
               }
            )
         },

         /**
          * 注册
          */
         register() {
            if (this.password != this.confirmPassword) {
               Toast('两次输入的密码不一致！')
            } else {
               request.post(this.url.register, {
                  username: this.username,
                  password: this.password
               }).then(
                  res => {               
                     if (res.data.code == 200) {
                        this.username = ''
                        this.password = ''
                        this.confirmPassword = ''
                        this.confirmPasswordVisible = false
                        Toast(res.data.msg);
                     } else {
                        Toast(res.data.msg);
                     }
                  })
            }

         }

      },
   }
</script>
<style scoped>
   #background {
      width: 100%;
      height: 100vh;
      /* background-color: aliceblue; */
      box-sizing: border-box;
      float: left;
   }
   .wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;

   }

   #loading {
      color: grey;
      ;
   }

   #box {
      width: 100%;
      height: 400px;
      box-sizing: border-box;
      margin-top: 10px;
      padding-left: 5px;
      /* margin-left: 10px; */
   }

   #disbledButton {
      background-color: rgba(128, 128, 128, 0.425);
   }

   .van-field {
      font-weight: 500;
   }

   .box-card {
      width: 95%;
      /* margin-top: 150px;
      margin-left: 10px;
      margin-right: 10px; */
   }
</style>